<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>贷款申请</i></h3>

      <el-steps :active="active" style="margin: 40px 40px 40px 80px">
        <el-step title="选择实际控股人"></el-step>
        <el-step title="贷款详情"></el-step>
        <el-step title="在线签约"></el-step>
        <el-step title="进度查询"></el-step>
      </el-steps>

      <div v-if="active === 1" class="user-borrower">
        <el-form label-width="100px" style="margin-right: 300px">
          <el-form-item label="企业法人姓名" prop="legalName">
            <el-input v-model="legal.legalName" />
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                :disabled="submitBtnDisabled"
                @click="save"
            >
              下一步
            </el-button>
          </el-form-item>
        </el-form>
        <el-alert
            title="您提供的任何信息我们都承诺予以保护，不会挪作他用。"
            type="warning"
            :closable="false"
        >
        </el-alert>
      </div>

      <div v-if="active === 2" class="user-borrower">
        <h6>贷款基本信息</h6>
        <el-form label-width="120px">
<!--          <el-form-item label="贷款银行">
            <el-col :span="5">
              <el-input v-model="legal.bank" />
            </el-col> &nbsp;&nbsp;&nbsp;
          </el-form-item>-->

          <el-form-item label="贷款银行">
            <el-select v-model="legal.bank" placeholder="请选择贷款银行" @change="selectbankRate">
              <el-option v-for="rates in rate" :key="rates.bankRateId"  :value="rates.bankName" >{{rates.bankName}}</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="贷款利率">
            <el-col :span="5">
              <el-input :disabled="true" v-model="legal.bankRate" />
            </el-col> &nbsp;&nbsp;&nbsp;
          </el-form-item>

          <el-form-item label="贷款金额">
            <el-col :span="5">
              <el-input v-model="legal.totalMoney" />
            </el-col> &nbsp;&nbsp;&nbsp;万
          </el-form-item>

          <el-form-item label="贷款年限">
            <el-select v-model="legal.yeard">
              <el-option value="1">1月</el-option>
              <el-option value="2">2月</el-option>
              <el-option value="3">3月</el-option>
              <el-option value="6">6月</el-option>
              <el-option value="9">9月</el-option>
              <el-option value="12">12月</el-option>
              <el-option value="18">18月</el-option>
              <el-option value="36">36月</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="发放账号">
            <el-col :span="18">
              <el-input v-model="legal.bankAccount" />
            </el-col>
          </el-form-item>

          <el-form-item label="贷款用途">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="legal.textArea">
            </el-input>
          </el-form-item>


        </el-form>
        <h6>控股个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="姓名">
            <el-col :span="5">
              <el-input v-model="legal.legalName" />
            </el-col>
          </el-form-item>

          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="legal.legalAge" />
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="legal.legalSex">
              <el-option value="男" label="男">男</el-option>
              <el-option value="女" label="女">女</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="你和联系人关系">
            <el-col :span="5">
              <el-input v-model="legal.contactsRelation" />
            </el-col>
          </el-form-item>

        </el-form>

        <h6>控股人身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
                :on-success="onUploadSuccessIdCard1"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard1' }"
                :limit="1"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
                :on-success="onUploadSuccessIdCard2"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard2' }"
                :limit="1"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="营业执照">
            <el-upload
                :on-success="onUploadSuccessIdCard3"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard3' }"
                :limit="1"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button
                type="primary"
                :disabled="submitBtnDisabled"
                @click="prev"
            >
              返回
            </el-button>
            <el-button
                type="primary"
                :disabled="submitBtnDisabled"
                @click="saves"
            >
              下一步
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="active === 3" class="user-borrower">
        <el-form label-width="80px" style="margin-right: 300px;margin-left: 100px">
          <el-form>
            <div style="margin: 40px 40px 60px 80px">
              <el-alert
                  title="请进行签字"
                  type="warning"
                  show-icon
                  :closable="false"
              >
              </el-alert>
            </div>
            <div style="margin: 50px -70px 20px 60px">
              <vue-esign
                  ref="esign"
                  :width="800"
                  :height="300"
                  :isCrop="isCrop"
                  :lineWidth="lineWidth"
                  :lineColor="lineColor"
                  :bgColor.sync="bgColor"
              />
            </div>

          </el-form>

          <el-form-item style="text-align: center">
            <el-button
                type="primary"
                @click="prev"
            >
              返回
            </el-button>
            <el-button
                type="primary"
                @click="handleReset"
            >
              清空签名
            </el-button>
            <el-button
                type="primary"
                @click="handleGenerate"
            >
              授权
            </el-button>
          </el-form-item>
        </el-form>
        <el-alert
            title="您提供的任何信息我们都承诺予以保护，不会挪作他用。"
            type="warning"
            :closable="false"
        >
        </el-alert>
      </div>

      <div v-if="active === 4">
        <el-form label-width="150px"  v-if="borrowInfoStatus === 0">
          <div style="margin: 40px 40px 60px 80px">
            <el-alert
                title="您的企业认证申请已成功提交，请耐心等待认证结果"
                type="warning"
                show-icon
                :closable="false"
            >
              我们将在48h内完成审核，审核时间为周一至周五9:00至17:00。
            </el-alert>
          </div>
        </el-form>
        <div style="margin: 40px 40px 60px 80px" v-if="borrowInfoStatus == 1">
          <el-alert
              title="您的贷款申请正在审批中"
              type="success"
              show-icon
              :closable="false"
          >
          </el-alert>
        </div>
        <div style="margin: 40px 40px 60px 80px" v-if="borrowInfoStatus == 2">
          <el-alert
              title="您的贷款申请已通过"
              type="success"
              show-icon
              :closable="false"
          >
          </el-alert>
        </div>
        <div style="margin: 40px 40px 60px 80px" v-if="borrowInfoStatus == -1">
          <el-alert
              title="您的贷款申请未通过，请重新申请"
              type="error"
              show-icon
              :closable="false"
          >
          </el-alert>
        </div>

        <el-form label-width="100px" style="margin-right: 300px">
          <el-descriptions style="margin-left: 180px;margin-top: 50px" direction="vertical" :column="1" border>
            <el-descriptions-item label="贷款银行">{{editForm.bank}}</el-descriptions-item>
            <el-descriptions-item label="借款利率">{{editForm.bankRate}}</el-descriptions-item>
            <el-descriptions-item label="借款金额">{{editForm.totalMoney}}</el-descriptions-item>
            <el-descriptions-item label="发放账号">{{editForm.bankAccount}}</el-descriptions-item>
            <el-descriptions-item label="贷款用途">{{editForm.textArea}}</el-descriptions-item>
            <el-descriptions-item label="身份证正面"><img :src="editForm.idCard1" style="max-width: 400px;max-height: 400px"/></el-descriptions-item>
            <el-descriptions-item label="身份证反面"><img :src="editForm.idCard2" style="max-width: 400px;max-height: 400px"/></el-descriptions-item>
            <el-descriptions-item label="营业执照"><img :src="editForm.idCard3" style="max-width: 400px;max-height: 400px"/></el-descriptions-item>
          </el-descriptions>
        </el-form>
        <el-button v-if="legalequal.sumMoney == legalequal.payMoney" style="margin: 20px 10px 10px 300px" type="primary" @click="cancled">
          重新申请
        </el-button>
        <el-button v-if="editForm.borrowInfoStatus==-1 " style="margin: 20px 10px 10px 300px" type="primary" @click="cancled">
          重新申请
        </el-button>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "apply",
  data() {

    return {
      //法人
      legal:{
        bank:'',//贷款银行
        yeard:'',//贷款年限
        totalMoney:'',//借款金额
        bankAccount:'',//发放账号
        textArea:'',//贷款用途
        legalName:'',//法人姓名
        legalAge:'',//法人年龄
        legalSex:'',//法人性别
        contactsRelation:'',//你和联系人关系

        bankRate:'',

        idCard1:'',
        idCard2:'',
        idCard3:'',
      },
      editForm: {
        legalId:'',
        bank: '',//贷款银行
        bankRate: '',//借款利率
        totalMoney: '',//借款金额
        bankAccount: '',//发放账号
        textArea: '',//贷款用途
        dateTime:'',//借款日期
        borrowInfoStatus: '',//审批状态
        idCard1:'',//身份证正面
        idCard2:'',//身份证反面
        idCard3:'',//营业执照
      },
      borrowInfoStatus: 0, //审批状态
      active: 1, //步骤

      legalequal:{},
      sumMoney:101,//总还款金额
      payMoney:10,//已还款金额

      rate:[],
      legalMe:{},

      submitBtnDisabled: false,
      uploadUrl: 'http://localhost:9090/loan/api/oss/file/upload', //文件上传地址

      //授权签字
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '#ea889f',
      resultImg: '',
      isCrop: false,

      second: 20, // 倒计时间
      leftSecond: 0, //剩余时间


    }
  },
  mounted() {
    this.$axios
        .post(`http://localhost:9090/loan/apply/getLegalByUid`).then(
        response => {
          this.legalMe=response.data
          if (response.data.success==true){
            this.editForm.legalId=response.data.obj.legalId
            this.editForm.bank=response.data.obj.bank
            this.editForm.bankRate=response.data.obj.bankRate
            this.editForm.totalMoney=response.data.obj.totalMoney
            this.editForm.bankAccount=response.data.obj.bankAccount
            this.editForm.textArea=response.data.obj.textArea
            this.editForm.dateTime=response.data.obj.dateTime
            this.editForm.borrowInfoStatus=response.data.obj.borrowInfoStatus
            this.editForm.idCard1=response.data.obj.idCard1
            this.editForm.idCard2=response.data.obj.idCard2
            this.editForm.idCard3=response.data.obj.idCard3

            this.borrowInfoStatus=response.data.obj.borrowInfoStatus
            this.active=4
          }
        }
    )
  },
  created() {
    this.$axios
        .get(`http://localhost:9090/loan/legal/getlegalById`).then(
        response => {
          this.legalequal = response.data;
        }
    )
    this.$axios
        .post(`http://localhost:9090/loan/rate/getRateList`, this.$qs.stringify(this.legal)).then(
        response => {
          this.rate=response.data
        }
    )
    this.$axios
        .post(`http://localhost:9090/loan/apply/getLegalByUid`).then(
        response => {
          this.legalMe=response.data
          if (response.data.success==true){
            this.editForm.legalId=response.data.obj.legalId
            this.editForm.bank=response.data.obj.bank
            this.editForm.bankRate=response.data.obj.bankRate
            this.editForm.totalMoney=response.data.obj.totalMoney
            this.editForm.bankAccount=response.data.obj.bankAccount
            this.editForm.textArea=response.data.obj.textArea
            this.editForm.dateTime=response.data.obj.dateTime
            this.editForm.borrowInfoStatus=response.data.obj.borrowInfoStatus
            this.editForm.idCard1=response.data.obj.idCard1
            this.editForm.idCard2=response.data.obj.idCard2
            this.editForm.idCard3=response.data.obj.idCard3

            this.borrowInfoStatus=response.data.obj.borrowInfoStatus
            this.active=4
          }
        }
    )

  },
  methods: {
    selectbankRate(){
      for (let i = 0; i < this.rate.length; i++) {
        if (this.legal.bank === this.rate[i].bankName) {
          this.legal.bankRate = this.rate[i].bankRate
        }
      }

    },

    //提交借款申请
    prev() {
      this.active -= 1
    },
    cancled() {
      var result = confirm("是否重新申请!")
      if (result==true){
        this.$axios
            .post(`http://localhost:9090/loan/apply/deleteLegalByUid`).then(
            response => {
              console.log(response.data.success)
              if (response.data.success==true){
                this.active=1
              }
            }
        )
      }
    },
    //提交借款申请
    save() {
      if (!(this.legal.legalName)) {
        this.$message({
          type: 'info',
          message: "请填写企业法人姓名"
        })
      }else if ((this.legal.legalName)){
        this.active++
      }
    },
    saves(){
      if (!(this.legal.bank)) {
        this.$message({
          type: 'info',
          message: "请填写贷款银行"
        })
      }else if (!(this.legal.yeard)) {
        this.$message({
          type: 'info',
          message: "请填写贷款年限"
        })
      }else if (!(this.legal.totalMoney)) {
        this.$message({
          type: 'info',
          message: "请填写贷款金额"
        })
      }else if (!(this.legal.bankAccount)) {
        this.$message({
          type: 'info',
          message: "请填写发放账号"
        })
      }else if (!(this.legal.textArea)) {
        this.$message({
          type: 'info',
          message: "请填写贷款用途"
        })
      }else if (!(this.legal.legalName)) {
        this.$message({
          type: 'info',
          message: "请填写法人姓名"
        })
      }else if (!(this.legal.legalAge)) {
        this.$message({
          type: 'info',
          message: "请填写法人年龄"
        })
      }else if (!(this.legal.legalSex)) {
        this.$message({
          type: 'info',
          message: "请填写法人性别"
        })
      }else if (!(this.legal.contactsRelation)) {
        this.$message({
          type: 'info',
          message: "请填写你和联系人的关系"
        })
      }else if (!(this.legal.idCard1)) {
        this.$message({
          type: 'info',
          message: "请上传身份证正面"
        })
      }else if (!(this.legal.idCard2)) {
        this.$message({
          type: 'info',
          message: "请上传身份证反面"
        })
      }else if (!(this.legal.idCard3)) {
        this.$message({
          type: 'info',
          message: "请上传营业执照"
        })
      }else if (
          (this.legal.bank)||
          (this.legal.yeard)||
          (this.legal.totalMoney)||
          (this.legal.bankAccount)||
          (this.legal.textArea)||
          (this.legal.legalName)||
          (this.legal.legalAge)||
          (this.legal.legalSex)||
          (this.legal.contactsRelation)||
          (this.legal.idCard1)||
          (this.legal.idCard2)||
          (this.legal.idCard3)
      ){
        this.active++
      }
    },
    //清空画布
    handleReset () {
      this.$refs.esign.reset()
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        this.$axios
            .post(`http://localhost:9090/loan/legal/addLegal`, this.$qs.stringify(this.legal)).then(
            response => {
              this.active++
              if (response.data.success==true){
                this.$message({
                  type: 'success',
                  message: "贷款申请成功提交"
                })
              }else {
                this.$message({
                  type: 'info',
                  message: "贷款申请提交失败"
                })
              }

            }
        )

        // this.active++
        // console.log('倒计时')
        this.leftSecond = this.second

        const timmer = setInterval(() => {
          this.leftSecond--
          if (this.leftSecond <= 0) {
            //停止计时
            this.borrowInfoStatus=1
            clearInterval(timmer)
            this.sending = false
          }
        }, 1000)
      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    timeDown() {
      console.log('倒计时')
      this.leftSecond = this.second

      const timmer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond <= 0) {
          //停止计时
          this.active = 5
          clearInterval(timmer)
          this.sending = false
        }
      }, 1000)
    },

    onUploadSuccessIdCard1(response) {
      this.legal.idCard1=response.url
    },
    onUploadSuccessIdCard2(response) {
      this.legal.idCard2=response.url
    },
    onUploadSuccessIdCard3(response) {
      this.legal.idCard3=response.url
    },


    onUploadRemove(file) {
      let url = file.response.url
      let arr = url.split("/")
      let name = arr[4]
      if (name === "idCard1"){
        this.legal.idCard1 = ''
      }
      if (name === "idCard2"){
        this.legal.idCard2 = ''
      }
      if (name === "idCard3"){
        this.legal.idCard3 = ''
      }
      console.log(file)
      this.$axios
          .delete(`http://localhost:9090/loan/api/oss/file/remove?url=`+url).then(
          response => {
            if (response.data.success == true){
              console.log("删除文件成功")
            }else {
              console.log("删除文件失败")
            }

          },
          error => {
            console.log('error submit!!', error.message)
          }
      )
    },

  },


}
</script>

<style scoped>

</style>
